<template>
  <div class="export-graph-div">
    <modal-dialog :width="width" :height="height" @close="$close">
      <div slot="header" class="c-header">{{ title }}</div>
      <div slot="body" class="c-body">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="水平间距">
            <el-input-number v-model="form.nodesep" size="mini" :min="0" :max="Infinity" />
          </el-form-item>
          <el-form-item label="垂直间距">
            <el-input-number v-model="form.ranksep" size="mini" :min="0" :max="Infinity" />
          </el-form-item>
          <el-form-item label="布局方向">
            <el-select v-model="form.rankdir" placeholder="请选择">
              <el-option
                v-for="item in dirOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分支形状">
            <el-select v-model="form.splines" placeholder="请选择">
              <el-option
                v-for="item in splineOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="text" @click.native="onSubmit">确认</el-button>
        <el-button type="text" @click.native="onCancel">取消</el-button>
      </div>
    </modal-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ModalDialog from '@/components/ModalDialog'
export default {
  components: {
    ModalDialog
  },
  props: {
    width: {
      type: Number,
      required: false,
      default: 300
    },
    height: {
      type: Number,
      required: false,
      default: 300
    },
    title: {
      type: String,
      required: false,
      default: '通风网络图自动布局'
    },
    msg: {
      type: String,
      default: '默认欢迎'
    }
  },
  data() {
    return {
      dirOptions: [
        {
          value: 'BT',
          label: '下→上'
        },
        {
          value: 'TB',
          label: '上→下'
        },
        {
          value: 'LR',
          label: '左→右'
        },
        {
          value: 'RL',
          label: '右→左'
        }
      ],
      splineOptions: [
        {
          value: 'line',
          label: '直线分支'
        },
        // {
        //   value: 'polyline',
        //   label: '折线分支'
        // },
        {
          value: 'spline',
          label: '曲线分支'
        },
        // {
        //   value: 'ortho1',
        //   label: '正交1'
        // },
        {
          value: 'ortho2',
          label: '正交分支'
        }
      ],
      form: {
        nodesep: 50.8,
        ranksep: 38.1,
        rankdir: 'BT',
        splines: 'line'
      }
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      config: 'config'
    })
  },
  created() {
    this.form.nodesep = this.config.layout.nodesep
    this.form.ranksep = this.config.layout.ranksep
    this.form.rankdir = this.config.layout.rankdir
    this.form.splines = this.config.layout.splines
  },
  methods: {
    // 取消
    onCancel() {
      // 关闭对话框
      this.$close()
    },
    // 确定
    onSubmit() {
      // 关闭对话框
      this.$close({
        ...this.form,
        // 其它全局参数
        nodewidth: this.config.node.size[0],
        nodeheight: this.config.node.size[1],
        fontsize: this.config.node.style.fontSize,
        // 需要自动布局计算
        needlayout: 1
      })
    }
  }
}
</script>

<style lang="scss">
.export-graph-div {
  // .dialog-header {
  //   .c-header {
  //     font-size: 16px;
  //     text-align: center;
  //   }
  // }
  .dialog-body {
    // @import '../../style/form.scss';
    .c-body {
      padding: 10px 10px !important;

      // .el-color-predefine__color-selector {
      //   border: 0.5px solid gray !important;
      // }
    }
  }
  .dialog-footer {
    @import '../../style/form.scss';
    .el-button {
      font-size: 16px !important;
    }
  }
}
</style>
